<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue">
		    <block slot="backText">返回</block>
		    <block slot="content">码猿学长</block>
		</cu-custom>
	
		<!-- 轮播图 -->
		<slideShowVue class="slide_show"></slideShowVue>
		<!-- 搜索框 -->
		<!-- <searchVue></searchVue> -->
		<!-- 类别选项 -->
		<!-- 	<view class="select_type">
			<dropDownBoxVue  class="select_type_box"></dropDownBoxVue>
		</view> -->
		<div class="scroll-container">
			<p class="hint"><img class="hint_image" src="../../static/labelImage/remind.png" alt="#">提示：</p>
			<transition name="scroll">
			  <p v-if="isScrolling" class="scroll-text">{{ scrollText }}</p>
			</transition>
		  </div>
		<view class="functional_item">
			<ul class="func_item_ul">
				<li><image src="../../static/funItemImage/search.png"/><p> 查询</p></li>
				<li><image src="../../static/funItemImage/select.png" /><p>类别</p></li>
				<li><image src="../../static/funItemImage/me_wx.png"/><p>联系</p></li>
				<li><image src="../../static/funItemImage/message.png" /><p>信息</p></li>
			</ul>
		</view>
		<view class="project_card">
			<p class="project_lable">
				<img class="lable_image" src="../../static/labelImage/hot.png">项目详情
				<dropDownBoxVue class="category-selector" @click="switchContent"></dropDownBoxVue>
			</p>
			<view class="project_content">
				<ul class="ul_content" v-for="(item, index) in mockData" :key="index">
					<navigator :url="'/pages/indexMessage/indexMessage?item='+ encodeURIComponent(JSON.stringify(item))">
						<view class="content_image_t">
							<image :src="item.homeImageAddress" class="slide-image"></image>
							<p class="text_1">{{item.projectName}}</p>
							<p class="text_2">价格：{{item.price}}</p>
						</view>
					</navigator>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/pages/api/request.js';
import searchVue from '../comment/search/search.vue';
import slideShowVue from '../comment/slideshow/slideshow.vue';
import dropDownBoxVue from '../comment/dropDownBox/dropDownBox.vue';
	export default {
		components:{
			searchVue,
			slideShowVue,
			dropDownBoxVue
		},
		data() {
			return {
				imgList: [],
				isScrolling: false,
				scrollText: "这是一段滚动的文字，可以根据需要进行修改。",
				page: 1,
				limit: 10,
				// 假数据
				mockData: [
				  { homeImageAddress: '../../static/slideshow/lunbotu1.png', projectName: '个人博客系统', price: '159'},
				  { homeImageAddress: '../../static/slideshow/lunbotu2.png', projectName: '智慧停车系统', price: '119' },
				  { homeImageAddress: '../../static/slideshow/lunbotu3.png', projectName: '智慧充电系统', price: '19' },
				  { homeImageAddress: '../../static/slideshow/lunbotu1.png', projectName: '同城配送平台', price: '134'},
				  { homeImageAddress: '../../static/slideshow/lunbotu2.png', projectName: '宿舍管理系统', price: '99' },
				  { homeImageAddress: '../../static/slideshow/lunbotu3.png', projectName: '基于语音的智能采集系统', price: '59'},
				  { homeImageAddress: '../../static/slideshow/lunbotu1.png', projectName: '基于大数据的智能推荐系统', price: '19'},
				  { homeImageAddress: '../../static/slideshow/lunbotu1.png', projectName: '基于大数据的智能推荐系统', price: '39'}
				]
			}
		},
		mounted() {
			// this.getSubjectData();
			// 当组件挂载后开始滚动文字
			this.startScrolling();
		
			// 加载假数据
			this.loadMore();
		
			// // 假设文字滚动完毕后停止滚动
			// setTimeout(() => {
			//   this.stopScrolling();
			// }, 5000); // 假设滚动时间为5秒
		},
		methods: {
			//获取项目数据
			getSubjectData(){
				request('/generator/devprojectpaper/list', 'GET', {})
				  .then((res) => {
					  if(res.code == 0){
						  this.imgList = res.page.list
					  }else{
						  this.$message.error('数据请求失败');
					  }
				  })
				  .catch((err) => {
				    this.$message.error('请求数据发生异常');
				  });
			},
			
		    startScrolling() {
			  this.isScrolling = true;
			},
			stopScrolling() {
			  this.isScrolling = false;
			},
		switchContent() {
			// 这里添加切换内容的逻辑，例如修改 mockData
			// 暂时简单示例，可根据实际需求修改
			this.mockData = [
				{ homeImageAddress: '../../static/slideshow/lunbotu2.png', projectName: '切换项目1' },
				{ homeImageAddress: '../../static/slideshow/lunbotu3.png', projectName: '切换项目2' }
			];
		},
		mounted() {
			
		}
		}
	}	
</script>

<style>
.project_content{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr)); /* 自动填充，每列最小宽度50%减去间隔，最大宽度为1fr */
	gap: 10px; /* 图片间隔 */
}
.slide_show{
	width: 95%;
	margin: 0 auto;
}
.slide-image{
   width: 90%; /* 图片宽度占满每个格子 */
   height: 130px; /* 让图片高度自适应 */
}
.content_image_t{
	text-align: center;
}
.ul_content{
	padding: 0px;
	box-shadow: 0 0 2px rgba(141, 140, 140, 0.5);
	border-radius: 8px;
}
.text_2{
	color: red;
}
.select_type{
	text-align: center;
	align-items: center;
}
.select_type_box{
    width: 95%;
}
.category-selector{
    width: 50%;
}
.func_item_ul{
	list-style: none;
	display: flex;
	margin-top: 10px;
	justify-content: center; /* 让列表项居中 */
}
.func_item_ul li{
	flex: 1;
	text-align: center; /* 让图片和文字居中 */
}
.func_item_ul li :hover{
	width: 50px;
	height: 42px;
}
.func_item_ul image{
	width: 40px;
	height: 40px;
}
.func_item_ul p{
	margin-left: 0px; /* 移除左侧边距 */
}
.functional_item{
	border: 1px rgba(222, 222, 222, 0.5) solid;
	box-shadow: 0 0 1px rgba(182, 182, 182, 0.5);
	height: 80px;
	background-color: #ffffff;
}
.functional_item p{
	font-family: Arial, sans-serif;
	font-size: 14px;
}

.scroll-container {
  overflow: hidden; /* 隐藏超出容器的部分 */
  height: 30px; /* 容器高度，根据需要调整 */
  border: 1px rgba(237, 237, 237, 0.5) solid;
  margin: 10px auto;
  box-shadow: 0 0 1px rgba(199, 198, 198, 0.5);
  display: flex;
  align-items: center; /* 实现上下对齐 */
  background-color: white;
}

.scroll-container .hint{
	position: absolute;
	width: 80px;
	height: 25px;
	background-color: white;
	z-index: 999;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding-left: 10rpx;
}
.hint {
  display: flex;
  align-items: center;
}
.scroll-text {
  animation: scrollText 10s linear infinite; /* 文字滚动动画，根据需要调整滚动速度 */
}

@keyframes scrollText {
  0% {
    transform: translateX(100%); /* 初始位置：文字完全隐藏在右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置：文字完全显示在左侧 */
  }
}
.project_lable{
	margin-top: 10px;
	height: 40px;
	margin-bottom: 10px;
	font-size: 16px;
	border-bottom: 1px solid #dfdddd;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.category-selector {
	margin-left: auto;
}
.lable_image{
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.hint_image{
	width: 20px;
	height: 20px;
	margin-right: 7px;
}

.project_card{
	background-color: #ffffff;
}
.project_content {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}
</style>
